import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import createImportPlugin from 'vite-plugin-import'
import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor'

// https://vitejs.dev/config/
// 更多颜色变量https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/default.less
export default defineConfig({
    plugins: [
        react(),
        // createImportPlugin({
        //     onlyBuild: false, // 是否只需要在生产环境中使用
        //     babelImportPluginOptions: [
        //         {
        //             libraryName: 'antd',
        //             libraryDirectory: 'es',
        //             style: true, // or 'css'
        //         },
        //     ],
        // }),
        themePreprocessorPlugin({
            less: {
                // 各个主题文件的位置
                multipleScopeVars: [
                    {
                        scopeName: 'theme-light',
                        path: resolve('src/assets/styles/themes/light.less'),
                    },
                    {
                        scopeName: 'theme-dark',
                        path: resolve('src/assets/styles/themes/dark.less'),
                    },
                ],
                // 默认主题
                defaultScopeName: 'theme-light',
                // 在生产模式是否抽取独立的主题css文件
                extract: false, 
            },
        }),
    ],
    css: {
        // 指定传递给 CSS 预处理器的选项; 文件扩展名用作选项的键
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
    resolve: {
        // 配置别名
        alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
    },
})
